<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-gradual-fff">
			<block slot="content">财富密码</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="self_a" @click="goPage('/pages/test_center/Records')">
				<view class="self_a_a">测试记录</view>
				<view class="self_a_b">
					<u-icon class="icon1" name="arrow-right" color="#ffffff" size="10"></u-icon>
				</view>
			</view>
			<view class="self_b">
				<view class="self_b_a">您的性别</view>
				<view class="self_b_b">
					<view class="self_b_b_a" @click="sex='男'">
						<view class="self_b_b_a_a" :style="'background-image:url('+(self_1)+');'"></view>
						<view class="self_b_b_a_b" :style="'background-image:url('+(sex=='男'?self_4:self_3)+');'"></view>
					</view>
					<view class="self_b_b_a" @click="sex='女'">
						<view class="self_b_b_a_a" :style="'background-image:url('+(self_2)+');'"></view>
						<view class="self_b_b_a_b" :style="'background-image:url('+(sex=='女'?self_4:self_3)+');'"></view>
					</view>
				</view>
				<view class="self_b_c">
					<view class="self_b_c_a">您的生日</view>
					<view class="self_b_c_b">
						<text :class="{active: isLunar==false}" @click="handleIsLunarChange(false)">阳历</text>
						<text :class="{active: isLunar==true}" @click="handleIsLunarChange(true)">阴历</text>
					</view>
				</view>
				<view class="self_b_d" @click="handleShowSelfBirthdaySelect(true)">
					{{ !selfBirthday.length ? "请选择生日": getLabel(selfBirthday)}}
				</view>
			</view>
			<view class="self_c" :class="disabled?'self_cc':''" @click="handleAnalysis">开始测试</view>
		</view>
		<datetime-picker :isLunar="isLunar" @change="handleSelfBirthdayChange" :isShow.sync="showSelfBirthdaySelect"
			@isShowChange="($event) => showSelfBirthdaySelect=$event" :defaultIndexArr="defaultIndexArr">
		</datetime-picker>	
	</view>
</template>
<script>
import request from '@/common/request.js';
import calendar from '@/utils/canledar.js';
export default {
	data() {
		return {
			showLoading:false,
			isLunar: false,
			sex: '男',
			selfBirthday: [],
			defaultIndexArr: [],
			showSelfBirthdaySelect: false,
			self_1:request.baseUrl_img+'/img/self_1.png',
			self_2:request.baseUrl_img+'/img/self_2.png',
			self_3:request.baseUrl_img+'/img/self_3.png',
			self_4:request.baseUrl_img+'/img/self_4.png',
			uid:0
		}
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
	},
	mounted() {
	
	},
	computed: {
		disabled() {
			return !this.selfBirthday.length
		},
	},
	methods: {
		goPage(url) {
			if (!this.$util.isLogin()) {
				return;
			}
			uni.navigateTo({
				url
			});
		},
		handleIsLunarChange(isLunar) {
			this.isLunar = isLunar
			this.selfBirthday = []
			this.defaultIndexArr = []
		},
		handleShowSelfBirthdaySelect(value) {
			this.showSelfBirthdaySelect = value
		},
		handleSelfBirthdayChange(value) {
			this.selfBirthday = value
		},
		getLabel(value) {
			return value[0].label + value[1].label + value[2].label
		},
		getValue(value) {
			const solarDate = this.getSolarDate(value)
			return '' + solarDate.year + String(solarDate.month).padStart(2, 0) + String(solarDate.day).padStart(2, 0)
		},
		getSolarDate(value) {
			const year = value[0]
			const month = value[1]
			const day = value[2]
			const isLunar = value[1].hasOwnProperty('isLeap')
			if (isLunar) {
				const solarDate = calendar.lunar2solar(year.value, month.value, day.value, month.isLeap)
				return {
					year: solarDate.cYear,
					month: solarDate.cMonth,
					day: solarDate.cDay
				}
			}
			return {
				year: year.value,
				month: month.value,
				day: day.value
			}
		},
		handleAnalysis() {
			if(!this.selfBirthday.length){
				return;
			}
			const params = {
				sex: this.sex,
				type:2,
				isLunar:Boolean(this.isLunar),
				selfBirthday: this.getValue(this.selfBirthday)
			};
			uni.navigateTo({
				url: '/pages/confirm_order/confirm_test_order?data=' + encodeURIComponent((JSON.stringify(
					params)))
			})
		}
	}
}
</script>

<style  lang="scss" scoped>
	.self_a{
		width: 700rpx;
		height: 120rpx;
		margin: auto;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 1);
		margin-top:20rpx;
		padding: 0 46rpx;
	}
	.self_a_a{
		float: left;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 120rpx;
	}
	.self_a_b{
		float:right;
		margin-top: 50rpx;
	}
	.self_b{
		box-shadow: inset 0 0 20rpx 20rpx #583770;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		width: 700rpx;
		height:auto;
		padding: 50rpx 45rpx;
		margin: auto;
	}
	.self_b_a{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		width: 100%;
		overflow: hidden;
	}
	.self_b_b{
		overflow: hidden;
		margin-top: 50rpx;
	}
	.self_b_b_a{
		width: 174rpx;
		height:auto;
		float: left;
		margin-left: 90rpx;
	}
	.self_b_b_a_a{
		width: 174rpx;
		height: 250rpx;
		border-radius: 10rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 174rpx 250rpx;
	}
	.self_b_b_a_b{
		width: 73rpx;
		height: 40rpx;
		margin: auto;
		margin-top: 35rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 73rpx 40rpx;
	}
	.self_b_c{
		overflow: hidden;
		margin-top: 40rpx;
	}
	.self_b_c_a{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 60rpx;
		float: left;
	}
	.self_b_c_b {
		display: inline-block;
		float: right;
		border-radius: 4px;
		border: 1px solid #573E58;
		>text {
			display: inline-block;
			padding: 3px 10px;
			color: #fff;
	
			&.active {
				background:#573E58;
				color: #fff;
			}
		}
	}
	.self_b_d{
		overflow: hidden;
		margin-top: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.self_c{
		width: 528rpx;
		height: 88rpx;
		background: #62469B;
		border-radius: 44rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: auto;
		margin-top: 55rpx;
	}
	.self_cc{
		opacity: 0.5;
	}
</style>
